<!DOCTYPE html>
<html>
<head>
<title>p-V Diagram</title>
</head>
<body>

<canvas id="pvDiagramCanvas" width="500" height="500"></canvas>

<script>
const canvas = document.getElementById('pvDiagramCanvas');
const ctx = canvas.getContext('2d');

// --- Drawing Parameters ---
const origin = { x: 60, y: 440 };
const pAxisEnd = { x: origin.x, y: 40 };
const vAxisEnd = { x: 460, y: origin.y };

// Coordinates for the corners of the rectangle
const a = { x: 120, y: 380 };
const b = { x: 400, y: 120 };
const c = { x: a.x, y: b.y };
const d = { x: b.x, y: a.y };

// Control point for the quadratic Bezier curve a-b
// Calculated to produce a concave-up curve in the p-V coordinate system
const curveControlPoint = { x: 240, y: 200 };

// --- Helper function to draw arrows ---
function drawArrow(ctx, fromx, fromy, tox, toy, headlen = 10) {
    const dx = tox - fromx;
    const dy = toy - fromy;
    const angle = Math.atan2(dy, dx);
    ctx.moveTo(fromx, fromy);
    ctx.lineTo(tox, toy);
    ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
    ctx.moveTo(tox, toy);
    ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
}

// --- Draw Axes ---
ctx.beginPath();
ctx.strokeStyle = 'black';
ctx.lineWidth = 2;
// p-axis (vertical)
drawArrow(ctx, origin.x, origin.y, pAxisEnd.x, pAxisEnd.y);
// V-axis (horizontal)
drawArrow(ctx, origin.x, origin.y, vAxisEnd.x, vAxisEnd.y);
ctx.stroke();

// --- Draw Labels ---
ctx.fillStyle = 'black';
ctx.font = 'italic bold 20px Times New Roman';
// Axis labels
ctx.fillText('p', pAxisEnd.x - 25, pAxisEnd.y + 5);
ctx.fillText('V', vAxisEnd.x + 5, vAxisEnd.y + 20);
ctx.fillText('O', origin.x - 25, origin.y + 20);

ctx.font = 'italic 20px Times New Roman';
// Point labels
ctx.fillText('a', a.x - 20, a.y + 15);
ctx.fillText('b', b.x + 10, b.y - 5);
ctx.fillText('c', c.x - 20, c.y - 5);
ctx.fillText('d', d.x + 10, d.y + 15);

// --- Draw Rectangle (acbd) ---
ctx.beginPath();
ctx.strokeStyle = 'black';
ctx.lineWidth = 1;
ctx.moveTo(a.x, a.y);
ctx.lineTo(c.x, c.y);
ctx.lineTo(b.x, b.y);
ctx.lineTo(d.x, d.y);
ctx.closePath();
ctx.stroke();

// --- Draw Curve (a to b) ---
ctx.beginPath();
ctx.strokeStyle = 'black';
ctx.lineWidth = 2.5;
ctx.moveTo(a.x, a.y);
ctx.quadraticCurveTo(curveControlPoint.x, curveControlPoint.y, b.x, b.y);
ctx.stroke();

</script>

</body>
</html>